---
title: Adicione ícones em links externos
description: Aprenda como installar um plugin rehype para adicionar ícones em links externos em seus arquivos Markdown
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Usando um plugin rehype, você pode identificar e modificar links nos seus arquivos Markdown que apontam para sites externos. Este exemplo adiciona ícones ao final de cada link externo, para que os visitantes saibam que estão saindo do seu site.

## Pré-requisitos
- Um projeto Astro usando Markdown para o conteúdo das páginas.

## Receita

1. Instale o plugin `rehype-external-links`.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rehype-external-links
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rehype-external-links
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rehype-external-links
        ```
        </Fragment>
      </PackageManagerTabs>

2. Importe o plugin no seu arquivo `astro.config.mjs`.

    Passe `rehypeExternalLinks` para o array `rehypePlugins`, junto com um objeto de opções que inclui uma propriedade `content`. Defina o `type` desta propriedade para `text` se você quiser adicionar texto simples ao final do link. Já para adicionar HTML ao final do link, defina a propriedade `type` para `raw`.

    ```ts
    // ...
    import rehypeExternalLinks from 'rehype-external-links';

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });
    ```

:::note
  O valor da propriedade `content` [não é representado na árvore de acessibilidade](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). Portanto, é melhor deixar claro que o link é externo no conteúdo que está em volta, em vez de depender apenas no ícone.
:::

## Recursos
- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)
